<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信</title>
</head>
<body>
<div id="app">
    <cpn1 v-bind:cmsg="msg" v-bind:cmovies="movies"></cpn1>
    <!--    <cpn1></cpn1>-->
</div>
<template id="cpn">
    <div>
        <h2>我是一个子组件</h2>
        <h3>{{cmsg}}</h3>
        <h3 v-for="(item,index) in cmovies">{{item}}</h3>
        <img src="../../img/c1.jpg" alt="">
    </div>
</template>
<script src="../../js/vue.js"></script>
<script>
    //1.父传子：props
    const cpn = {
        template: "#cpn",
        //1.第一种方式：数组
        /* props: [
             'cmovies',
             'cmsg'
         ],*/
        //2.第二种方式：对象
        props: {
            cmsg: {
                type: String,
                default: "没有值时默认就是我",
                required: true,
            },
            cmovies: {
                type: Array,
                /*类型是数组与对象时，默认值必须是一个函数*/
                default() {
                    return ['1', '2', '3']
                }
            }
        },
        methods: {},
        data() {
            return {}
        }
    };
    new Vue({
        el: "#app",
        data: {
            msg: "你好，世界",
            movies: ['海贼王', '海王', '海尔兄弟'],
        },
        components: {
            "cpn1": cpn,
        }
    })
</script>
</body>
</html>